<template>
  <div class="sharelist">
    <!-- 标题 -->
    <hmnavbar title="我分享的面经" path="/find"></hmnavbar>
    <!-- 搜索区域 -->
    <div class="search" @click="$router.push('/search')">
      <div class="content">
        <i class="iconfont iconicon_search"></i>请输入关键字
      </div>
    </div>
    <!-- 列表区域 -->
    <div class="shareList">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <share
          :item="item"
          v-for="(item, index) in shareList"
          :key="index"
        ></share>
      </van-list>
    </div>
  </div>
</template>

<script>
// 导入组件
import share from '../find/share.vue'
// 导入方法
import { getShareApi } from '@/api/articles.js'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      // 分享列表数据
      shareList: [],
      // 总长度
      total: 0,
      // 数据源开始的下标
      start: -5,
      // 请求的页容量
      limit: 5
    }
  },
  methods: {
    async onload () {
      // 每次进入这个方法这后开始下标应该加上页容量
      this.start += this.limit
      // 发送请求到服务器得以面经列表数据
      var res = await getShareApi({
        start: this.start,
        limit: this.limit
      })
      this.shareList.push(...res.data.list)
      this.total = res.data.total
      // 将 list 的加载状态改为 false
      this.loading = false
      // 判断数据源是否加载完毕
      if (this.shareList.length >= this.total) {
        this.finished = true
      }
    }
  },
  components: {
    share
  }
}
</script>

<style lang="less" scoped>
.sharelist {
  .search {
    padding: 0 15px;
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      background-color: #f7f4f5;
      border-radius: 20px;
      font-size: 14px;
      color: #c3c2c3;
      .iconfont {
        margin-right: 5px;
        font-size: 20px;
      }
    }
  }
}
</style>
